<template>
  <div class="allComments">
    <PageHeadLow headTitle="全部评论"/>
    <div class="commentInfo">
      <CommentList :commentPeoples="commentPeoples"/>
    </div>
    
    
  </div>
</template>

<script>
import PageHeadLow from "../components/pageHeadLow.vue"
import CommentList from "../components/commentList"

export default {
  name: "AllComments",
  data() {
    return {
      commentPeoples: []
    }
  },
  mounted() {
    this.$axios.get("http://localhost:3000/api/articles",{
      params: {
        articleId: this.$route.params.articleId
      }
    })
    .then(res => {
      // console.log(res.data);
      this.commentPeoples = res.data[0].commentPeople;
    })
    .catch(error => {
      console.log(new error(error))
    })
  },
  components: {
    PageHeadLow,
    CommentList
  }
}
</script>

<style lang="less" scoped>
  .allComments{
    background-color: #fff;
    position: relative;
    height: 600px;
    .commentInfo{
      width: 96%;
      margin: 0 auto;
      box-shadow: 0 2px 20px rgba(0,0,0,.2);
      border-radius: 8px;
      padding: 10px;
      box-sizing: border-box;
    }
  }
</style>


